<template>
  <el-form
      ref="ruleFormRef"
      :model="formData"
      label-width="auto"
      style="max-width: 800px"
      status-icon
  >
    <el-form-item
        prop="username"
        label="用户名"
        :rules="[{required: true,message: '请输入用户名',trigger: 'blur'}]">
      <el-input placeholder="请输入用户名" v-model="formData.username"/>
    </el-form-item>

    <el-form-item
        prop="nickname"
        label="昵称"
        :rules="[{required: true,message: '请输入昵称',trigger: 'blur'}]">
      <el-input placeholder="请输入昵称" v-model="formData.nickname"/>
    </el-form-item>

    <el-form-item
        prop="password"
        label="密码"
        :rules="[{required: true,message: '请输入密码',trigger: 'blur'}]">
      <el-input type="password" placeholder="请输入密码" show-password v-model="formData.password"/>
    </el-form-item>

    <el-form-item
        prop="sex"
        label="性别"
        :rules="[{required: true,message: '请选择角色',trigger: 'blur'}]">
      <el-radio-group v-model="formData.role">
        <el-radio :value="1">管理员</el-radio>
        <el-radio :value="0">用户</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item
        prop="email"
        label="邮箱"
        :rules="[{required: true,message: '请输入邮箱',trigger: 'blur'}]">
      <el-input placeholder="请输入邮箱" v-model="formData.email"/>
    </el-form-item>

    <el-form-item
        prop="phone"
        label="手机号"
        :rules="[{required: true,message: '请输入手机号',trigger: 'blur'}]">
      <el-input placeholder="请输入手机号" v-model="formData.phone"/>
    </el-form-item>

    <el-form-item
        prop="sex"
        label="性别"
        :rules="[{required: true,message: '请选择性别',trigger: 'blur'}]">
      <el-radio-group v-model="formData.sex">
        <el-radio :value="1">男</el-radio>
        <el-radio :value="0">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit(ruleFormRef)">
        提交
      </el-button>
      <el-button type="primary" @click="router.back()">
        取消
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script setup name="UserEditView" lang="ts">
import {onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {ElMessage, type FormInstance} from "element-plus";
import UserApi from "@/axios/UserApi";
import User from "@/model/User";

const ruleFormRef = ref<FormInstance>()
const formData = ref<User>(new User())
const route = useRoute()
const router = useRouter()
onMounted(() => {
  if (route.query.id) {
    const id = parseInt(route.query.id as string);
    UserApi.get(id)
        .then(resp => {
          Object.assign(formData.value, resp.data)
        })
  }
})


const submit = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid: boolean) => {
    if (valid) {
      if (route.query.id) {
        const id = parseInt(route.query.id as string);
        UserApi.update(id, formData.value)
            .then(() => {
              ElMessage.success("修改成功")
              router.back()
            })
      } else {
        UserApi.save(formData.value)
            .then(() => {
              ElMessage.success("保存成功")
              router.back()
            })
      }
    }
  })
}
</script>


<style lang="less" scoped>
</style>